<template>
  <div class="search-criteria">
    <BasicSearchCriteria :api="getCollectManagerList" :form-data="formData">
      <!-- 状态 -->
      <a-form-item name="status" class="select-item">
        <a-select
          v-model:value="formData.status"
          :options="COLLECT_START_STATE"
          placeholder="全部状态"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
        </a-select>
      </a-form-item>

      <!-- 资源类型 -->
      <a-form-item name="resource_type" class="select-item">
        <a-select v-model:value="formData.resource_type" :options="RESOURCE_TYPE" placeholder="全部资源类型">
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        </a-select>
      </a-form-item>

      <!-- 站点 -->
      <a-form-item name="site_id" class="select-item">
        <a-select
          v-model:value="formData.site_id"
          :options="STATION"
          placeholder="全部站点"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
        </a-select>
      </a-form-item>

      <!-- 内容类型 -->
      <a-form-item name="content_type" class="select-item">
        <a-select
          v-model:value="formData.content_type"
          :options="CONTENT_TYPE"
          placeholder="全部内容类型"
          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        >
        </a-select>
      </a-form-item>

      <!-- 资源名称 -->
      <a-form-item name="name" class="input-item">
        <a-input v-model:value.trim="formData.name" placeholder="请输入资源名称关键词"> </a-input>
      </a-form-item>
    </BasicSearchCriteria>
  </div>
</template>

<script lang="ts" setup name="SearchCriteria">
import BasicSearchCriteria from '../../../../components/BasicSearchCriteria.vue'
import { reactive } from 'vue'
import {
  COLLECT_START_STATE,
  RESOURCE_TYPE,
  STATION,
  CONTENT_TYPE,
  getStation
} from '@/stores/modules/collect-manage/select-data-source'
import type { StrType, NumType } from '@/stores/modules/collect-manage/select-data-source'
import apis from '@/apis'

// 获取站点
getStation({
  site_status: 1
})

// api
const { getCollectManagerList } = apis.collectManage

// form
type FormDataType = {
  status: NumType
  resource_type: NumType
  site_id: NumType
  content_type: NumType
  name: StrType
}
let formData = reactive<FormDataType>({
  status: undefined,
  resource_type: undefined,
  site_id: undefined,
  content_type: undefined,
  name: ''
})
</script>

<style lang="less" scoped>
.search-criteria {
  .ant-form-inline {
    .ant-form-item {
      margin-right: 10px;
    }
    .select-item {
      width: 134px;
    }
    .input-item {
      width: 196px;
    }
  }
}
</style>
